<template>
    <MercBox
      v-model="model"
      :title="title"
      :lazy="true"
      :height="800"
      :width="1100"
      :padding="10"
    >
      <!-- 设置查询条件 -->
      <div style="padding-bottom: 10px">
        <span style="margin-right: 20px">请选择数据</span>
        <el-input
          placeholder="料箱编号"
          style="width: 200px"
          v-model="MaterialboxNo"
        />
        <el-button
          type="primary"
          style="margin-left: 10px"
          size="medium"
          class="el-icon-zoom-out"
          @click="search"
          >搜索</el-button
        >
      </div>
      <!-- merc-table配置的这些属性见MercTable组件api文件  单选: :single="true"-->
      <merc-table
        ref="mytable"
        :loadKey="true"
        :columns="columns"
        :pagination="pagination"
        :pagination-hide="false"
        :height="600"
        :url="url"
        :index="true"
        :single="true"
        :ck = "false"
        :defaultLoadPage="false"
        @loadBefore="loadTableBefore"
      ></merc-table>
    </MercBox>
  </template>
  <script>
  import MercBox from "@/components/basic/MercBox.vue";
  import MercTable from "@/components/basic/MercTable.vue";
  export default {
    components: {
        MercBox: MercBox,
        MercTable: MercTable,
    },
    computed:{
        title(){
            return '库位号-' + this.detail.WarehouseLocationNo + '-移入移出信息';
        }
    },
    data() {
      return {
        model: false,
        MaterialboxNo: "",
        Name:"",
        url: "api/WarehouseLocationE/getPageData",
        columns: [{field:'Id',title:'主键',type:'string',width:110,hidden:true,readonly:true,require:true,align:'left'},
                       {field:'WarehouseLocationId',title:'库位号',hidden:true,type:'string',width:110,align:'left',sort:true},
                       {field:'MaterialboxNo',title:'移动料箱号',type:'string',width:110,align:'left'},
                       {field:'MovementDirection',title:'移动方向',type:'string',width:110,align:'left'},
                       {field:'MovementTime',title:'移动时间',type:'datetime',width:150,align:'left',sort:true},
                       {field:'LocationDescription',title:'描述',type:'string',width:180,align:'left'},
                       {field:'AcquisitionTime',title:'获取时间',type:'datetime',width:150,align:'left',sort:true}],
        pagination: {},
        detail: {}, //明细表选择的行
      };
    },
    methods: {
      show(detail) {
        this.detail = detail;
        this.model = true;
        //打开弹出框时，加载table数据
        this.$nextTick(() => {
          this.$refs.mytable.load();
        });
      },
      search() {
        this.$refs.mytable.load();
      },
      loadTableBefore(params) {
        //查询前，设置查询条件
        params.wheres = [
          { name: "MaterialboxNo", value: this.MaterialboxNo },          
          { name: "WarehouseLocationId", value: this.detail.Id }
        ];
        return true;
      },
    },
  };
  </script>